/**
 * Created by admin on 2017/1/4.
 */
import 'rxjs/add/operator/switchMap';
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {Location} from '@angular/common';

import {Hero} from './hero';
import {HeroService} from './hero.service';


@Component({
    moduleId: module.id,
    selector: 'my-hero-detail',
    template: `
        <div *ngIf="hero">
            <div class="hero_detail">
                <h1>{{hero.name}} Detail</h1>
                <div class="heroId">
                    <span>Id:</span>{{hero.id}}
                </div>
                <div class="heroName">
                    <span>Name:</span>
                    <input [(ngModel)]="hero.name" placeholder="name" />
                </div>
                <button (click)="goBack()" class="backBtn">Back</button>
            </div>
            
        </div> 
    `,
    styles: [`
        .hero_detail{
            background: #deabd6;
            width: 500px;
            height: 300px;
            color: #fff;
            padding: 5px;
            font-size: 20px;
            border-radius: 5px;
        }
        .hero_detail>div{margin-bottom: 5px;}
        .heroName input{width: 200px;height: 30px;line-height: 30px; font-size: 14px; color: #369;text-indent: 10px;}
        .backBtn{display: block;font-size:16px;width: 100px;height: 30px;line-height: 30px;
        text-align: center;background: #369;color: #fff;border: none; margin-top: 10px;}
        .backBtn:hover{background: #4a7d99;}
    `]

})
export class HeroDetailComponent implements OnInit {
    hero: Hero;

    constructor(private heroService: HeroService,
                private route: ActivatedRoute,
                private location: Location) {
    }

    ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
            .subscribe(hero => this.hero = hero);
    }

    goBack(): void {
        this.location.back();
    }
}

